

<template>
  <view class="box" v-for="(item, index) in list" :key="index">
    <uv-image
        width="80"
        height="80"
        :src="item.goods_img"
    ></uv-image>
    <view class="info">
      <view class="name">
        {{ item.goods_name }}
      </view>
      <view class="bottom">
        <view class="price">
          ￥{{ item.goods_price }}
        </view>
        <view class="num">
          X {{ item.number }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, defineEmits, watch } from "vue";

const emit = defineEmits(); // Define the emit function
const list = ref([]);

onMounted(() => {
  list.value = uni.getStorageSync("GOODS") || [];
  // console.log(list.value, '000');
  emit('update:list', list.value); // Emit the list value
  emit('update:totalPrice', totalPrice.value); // Emit the total price
});

const totalPrice = computed(() => {
  return list.value.reduce((total, item) => {
    return total + (parseFloat(item.goods_price) * item.number);
  }, 0).toFixed(2);
});

// Watch for changes in list or totalPrice and emit them
watch([list, totalPrice], ([newList, newTotalPrice]) => {
  emit('update:list', newList);
  emit('update:totalPrice', newTotalPrice);
});
</script>
<style scoped lang="scss">
.box{
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 15px;
  margin-top: 10px;
  .info{
    margin-left: 15px;
    width: calc(100% - 95px);
    .name {
      display: -webkit-box; /* 这是创建一个伸缩容器 */
      -webkit-box-orient: vertical; /* 定义伸缩容器的主轴方向 */
      -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
      overflow: hidden; /* 隐藏超出内容 */
      text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
    }
    .bottom{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      .price{
        color: red;
      }
    }
  }
}
</style>